<template>
    <div class="song-comment">

        <div class="list">
            <el-card class="item" v-for="item in props.commentList" :key="item">
                <template #header>
                    <div class="user-info">
                        <el-avatar :src="item.user.avatarUrl" size="small"></el-avatar>
                        <span>{{ item.user.nickname }}</span>
                    </div>
                </template>
                <div class="content">
                    {{ item.content }}
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
    commentList: {
        type: Array,
        default: () => []
    }
})
onMounted(() => {
    console.log(props.commentList)
})
</script>

<style lang="less" scoped>
.song-comment {
    padding-right: 20px;

    :deep(.el-card__header) {
        padding: 0;
    }

    :deep(.el-card__body) {
        padding: 0;
    }

    .item {
        margin-bottom: 10px;
        background: #fff;

        .user-info {
            display: flex;
            align-items: center;
            padding: 10px;

            span {
                font-size: 12px;
                margin-left: 10px;
            }
        }
    }

    .content {
        padding: 5px 15px 15px 15px;
        font-size: 14px;
        line-height: 1.5;
    }
}
</style>